<template>
    <div>
        <div>
            <Top></Top>
        </div>
        <div class="top">
            <img :src="res.img"
                alt="">
            <div class="jia">
                <van-icon name="plus" />
            </div>
        </div>
        <div class="cha">
            <p clas="chas" @click="cha">查找聊天内容</p>
            <van-icon name="arrow" class="van-icon-arrow" />
        </div>
        <div class="xiaoiss"> 
            <div class="xiaoxi">
                <p clas="chas">消息免打扰</p>
                <van-switch v-model="checked" />
            </div>
            <div class="xiaoxi">
                <p clas="chas">置顶聊天</p>
                <van-switch v-model="xiaoxi" />
            </div>
            <div class="xiaoxi">
                <p clas="chas">提醒</p>
                <van-switch v-model="tixing" />
            </div>
        </div>
        <div class="cha">
            <p clas="chas">设置聊天背景</p>
            <van-icon name="arrow" class="van-icon-arrow" />
        </div>
        <div class="cha">
            <p clas="chas">清空聊天记录</p>
            <!-- <van-icon name="arrow" class="van-icon-arrow" /> -->
        </div>
        <div class="cha">
            <p clas="chas">投诉</p>
            <van-icon name="arrow" class="van-icon-arrow" />
        </div>

    </div>
</template>

<script setup>
import Top from "../../components/top.vue"
import { useRouter  , useRoute} from "vue-router"
const router = useRouter()
import { ref } from 'vue'
const checked = ref(false)
const xiaoxi = ref(false)
const tixing = ref(false)
const route = useRoute()
const res = route.query
console.log(res)
const cha = () => {
    router.push("/found")
}
</script>

<style scoped>
img {
    width: 60px;
    height: 60px;
    margin-left: 10px;
}

.top {
    height: 100px;
    background-color: #ededed;
    display: flex;
    align-items: center;

}

.jia {
    width: 60px;
    height: 60px;
    border: 2px dashed #b8b8b8;
    border-radius: 15px;
    font-size: 50px;
    color: #b8b8b8;
    font-weight: normal;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 10px;

}

.cha {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    background-color: #ededed;
    margin-top: 20px;
}

p {
    margin-left: 10px;
}

.van-icon-arrow {
    margin-right: 10px;
}

.xiaoxi {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
    background-color: #ededed;
    /* margin-top: 20px; */
}

.van-switch {
    margin-right: 10px;
}
.xiaoiss{
    margin-top: 20px;
}
</style>